import React, { useState, useEffect } from 'react'
import axios from '../../utils/request'
import { Table, Space, Input } from 'antd';
import { Modal, Button } from 'antd';

export default function Re() {

    const [list, setList] = useState([])
    useEffect(() => {
        getList()
    }, [])
    //渲染
    const getList = () => {
        axios.post('/api/redian').then(res => {
            // console.log(res);
            setList([...res.data.data])
        })
    }
    //删除
    const Del = (id) => {
        axios.post('/api/del', { id }).then(res => {
            // console.log(res);
            getList()
        })
    }
    //标题
    const columns = [
        {
            title: '姓名',
            dataIndex: 'name',
            render: name => <a>{name}</a>,
        },
        {
            title: '介绍',
            dataIndex: 'introduce',
        },
        {
            title: '科室',
            dataIndex: 'keshi',
        },
        {
            title: '级别',
            dataIndex: 'jibie',
        },
        {
            title: '日期',
            dataIndex: 'date',
        },
        {
            title: '电话',
            dataIndex: 'phone',
        },
        {
            title: '浏览',
            dataIndex: 'num',
        },
        {
            title: '操作',
            render: (record) => (
                <Space size="middle">
                    <a onClick={() => { Del(record.id) }} >删除</a>
                    <a onClick={() => { Bian(record) }} >编辑</a>
                </Space>
            ),
        },
    ];

    //搜所
    const { Search } = Input;
    const onSearch = (value) => {
        axios.post('/api/search', { value: value }).then(res => {
            // console.log(res);
            setList([...res.data.data])
        })
    }
    //添加
    const [isModalVisible, setIsModalVisible] = useState(false);
    const [show, setshow] = useState(false)//开关
    const [oname, setoname] = useState([])
    const [ointroduce, setointroduce] = useState([])
    const [okeshi, setokeshi] = useState([])
    const [oid, setoid] = useState([])

    const name = (e) => {
        setoname(e.target.value)
    }
    const introduce = (e) => {
        setointroduce(e.target.value)
    }
    const keshi = (e) => {
        setokeshi(e.target.value)
    }

    const showModal = () => {
        setIsModalVisible(true);
    };
    //确定按钮
    const handleOk = () => {
        if (show === true) {
            axios.post('/api/rdset', { oname, ointroduce, okeshi, oid }).then(res => {
                // console.log(res);
                getList()
            })
            // 新增
        } else if (show === false) {
            axios.post('/api/rdadd', { oname, ointroduce, okeshi }).then(res => {
                // console.log(res);
                getList()
            })
        }
        clear()
    };

    //取消按钮
    const handleCancel = () => {
        clear()
    };

    //编辑
    const Bian = (record) => {
        // console.log(record);
        setIsModalVisible(true);
        setshow(true)
        setoname(record.name)
        setointroduce(record.introduce)
        setokeshi(record.keshi)
        setoid(record.id)
    }

    //清空
    const clear = () => {
        setIsModalVisible(false);
        setoname('')
        setointroduce('')
        setokeshi('')
        setoid(0)
    }

    return (
        <div className='wrapper'>
            <div className="add">
                <Button type="primary" onClick={showModal}>
                    添加
                     </Button>
                <Modal title="请输入" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel}>
                    <p>姓名:<input value={oname} onChange={(e) => name(e)} type="text" /></p>
                    <p>介绍:<input value={ointroduce} onChange={(e) => introduce(e)} type="text" /></p>
                    <p>科室:<input value={okeshi} onChange={(e) => keshi(e)} type="text" /></p>
                </Modal>
            </div>
            <Search placeholder="请输入介绍" onSearch={onSearch} style={{ width: 200 }} />
            <Table dataSource={list} columns={columns} />
        </div>
    )
}
